<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆页面</title>
  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/jquery.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../ele-2.15.7/index.js"></script>
  <!-- author xjt -->
</head>
<body>
<div id="login">
  <h2>后台登陆</h2>
  <div class="login_form">
    <span>账号：</span>
    <input type="text" placeholder="请输入账号" v-model="userLogin.userzh" >
    <br>
    <span>密码：</span>
    <input type="password" placeholder="请输入密码" v-model="userLogin.pwd">
    <br>
    <span style="margin-left: 20px;padding-left:40px;">验证码：</span><img src="../VcodeServlet" >
    <input type="text" placeholder="请输入验证码"  v-model="userLogin.vcode">
  </div>
  <div class="btn">
    <button class="login_btn" @click.prevent="logins">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
  </div>

</div>
</body>
<script>
 var v=new Vue({
    el:"#login",
    data:{
      userLogin:{userzh:"",pwd:"",vcode:""},
    },
   methods:{
     logins(){
       var params = new URLSearchParams();
       for (let name in this.userLogin){
         params.append(name,this.userLogin[name]);
       }
       axios.post("../GLYServlet.s",params).then(res=>{
         if (res.data.code===1){
           this.$message({
             message:res.data.msg,
             type: 'success'
           });
           setTimeout("javascript:window.location.href='user.html'",800);
         }else {
           this.$message.error(res.data.msg)
         }
       });
     },
   }
 })
</script>
<style>
  body{
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#a18cd1 0%, #fbc2eb 100%);
    background-size: cover;
    flex: 1;
    align-items: center;
  }
  #login{
    text-align: center;
    margin: 0 auto;
    width: 600px;
    height: 520px;
    background-color: rgba(87, 86, 86, 0.2);
    border-radius: 25px;
    box-shadow: 5px 2px 35px -7px #ff9a9e;
  }
  .login h2{
    margin-top: 40px;
    color: aliceblue;
    font-weight: 100;
  }
  .login_form{
    padding: 20px;
  }
  .login_form span{
    color: rgb(131, 220, 255);
    font-size: 18px;
    font-weight: 100;
  }
  .login_form input{
    background-color: transparent;
    width: 320px;
    padding: 2px;
    text-indent: 2px;
    color: white;
    font-size: 20px;
    height: 45px;
    margin: 30px 30px 30px 5px;
    outline: none;
    border: 0;
    border-bottom: 1px solid rgb(131, 220, 255);
  }
  img{
    height: 30px;
    width: 60px;
  }
  input::placeholder{
    color: #fbc2eb;
    font-weight: 100;
    font-size: 18px;
    font-style: italic;
  }
  .login_btn{
    background-color: rgba(255, 255, 255, 0.582);
    border: 1px solid rgb(190, 225, 255);
    padding: 10px;
    width: 240px;
    height: 60px;
    border-radius: 30px;
    font-size: 30px;
    color: rgb(100, 183, 255);
    font-weight: 100;
    margin-top: 15px;
  }
  .login_btn:hover{
    box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
    background-color: transparent;
    color: white;
    /* 选择动画 */
    animation: login_mation 0.5s;
  }

  /* 定义动画 */
  @keyframes login_mation
  {
    from {
      background-color: rgba(255, 255, 255, 0.582);
      box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
    }
    to {
      background-color: transparent;
      color: white;
      box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
    }
  }
</style>

</html>

